import React, { Component, useState, useCallback, useEffect } from 'react';

const WatchCount = () => {
  const [count, setCount] = useState(0);

  // useEffect(() => {
  //   const Timer = setInterval(function log() {
  //     console.log(`Count: ${count}`);
  //   }, 2000);
  //   return () => {
  //     clearInterval(Timer);
  //   };
  // }, [count]);

  const handleClick = () => setCount(count + 1);
  const handleClickTwo = () => {
    setTimeout(() => {
      setCount(count + 1);
      alert(count);
    }, 3000);
  };

  return (
    <>
      <button onClick={handleClick}>+</button>
      <button onClick={handleClickTwo}>setTime</button>
      <div>Count: {count}</div>
    </>
  );
};

export default WatchCount;

// class test extends Component<any, any> {
//   constructor(props: any) {
//     super(props);
//     this.state = { count: 0 };
//   }

//   render() {
//     const handleClick = () =>
//       this.setState((pre: any) => {
//         const newPre = JSON.parse(JSON.stringify(pre));
//         newPre.count += 1;
//         return newPre;
//       });
//     const handleClickTwo = () => {
//       setTimeout(() => {
//         alert(this.state.count);
//         // this.setState((pre: any) => {
//         //   const newPre = JSON.parse(JSON.stringify(pre));
//         //   newPre.count += 1;
//         //   return newPre;
//         // });
//       }, 3000);
//     };
//     const { count } = this.state;
//     return (
//       <>
//         <button onClick={handleClick}>+</button>
//         <button onClick={handleClickTwo}>setTime</button>
//         <div>Count: {count}</div>
//       </>
//     );
//   }
// }

// export default test;

//
